3
3
.
.
2
2
.
.
2
2
C
C
u
u
s
s
t
t
o
o
m
m
L
L
a
a
y
y
o
o
u
u
t
t
I
I
n
n
f
f
o
o
[
[
R
R
]
]
This tutorial shows how to create custom Layout that will behave like Column Layout.
This is similar to Single Composable except instead of applying Modifier to a single Composable we will be applying Layout
to multiple Composable Children using the same principles.
MainActivity.kt
package com.example.myapplication
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.unit.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyColumn(Modifier.border(2.dp, Color.Magenta).padding(8.dp)) {
Text("First")
Text("Second")
Text("Third")
}
}
}
}
@Composable
fun MyColumn(modifier: Modifier = Modifier, children: @Composable() () -> Unit) {
Layout(modifier = modifier, children = children) { measurables, constraints ->
val placeables = measurables.fastMap { measurable -> measurable.measure(constraints) }
var yPosition = 0
layout(constraints.maxWidth, constraints.maxHeight) {
placeables.forEach { placeable ->
placeable.placeRelative(x = 0, y = yPosition)
yPosition += placeable.height
}
}
}
}
Output
